<template>
    <el-container>
        <el-header>
            <span class="el-icon-top" @click="sup"></span>
            <span class="el-icon-bottom" @click="sub"></span>
        </el-header>
        <el-container>
            <el-aside width="200px" class="aside">
                <h3>PRICE</h3>
                <p @click="list=allList">all</p>
                <p @click="changePrice(0,100)">0.00-100.00</p>
                <p @click="changePrice(100,500)">100.00-500.00</p>
                <p @click="changePrice(500,1000)">500.00-1000.00</p>
                <p @click="changePrice(1000,2000)">1000.00-2000.00</p>
            </el-aside>
            <el-main class="el-main">
                <div class="main" @scroll="Scroll">
                    <Shop v-for="item in list" :key="item._id" :item="item" @add="add"></Shop>
                </div>
                <!-- <div class="load">
                    <img src="load.gif" />
                </div>-->
            </el-main>
        </el-container>

        <!-- 加购物车 -->
        <el-dialog title="提示" :visible.sync="showAdd" width="30%">
            <span>加入购物车成功！</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showAdd = false">继续购物</el-button>
                <el-button type="primary" @click="gotoShopCar">去购物车</el-button>
            </span>
        </el-dialog>
    </el-container>
</template>

<script>
import Shop from "../components/Shop.vue";
export default {
    components: {
        Shop,
    },
    data() {
        return {
            list: [],
            allList: [],
            showAdd: false,
            num: 0, //这个变量用来判断滚动到底部加载哪个json数据
            timer: null, // 这个变量用来绑定和解绑定时器，防止无限以及重复加载，对应bug：下拉到底部再滑上去然后再拉下
        };
    },
    methods: {
        // 父组件方法加购物车 //显示登录框
        add(val) {
            if (localStorage.getItem("name")) {
                this.showAdd = true;
                this.$store.commit("add", val);
            } else {
                this.$alert("还没登录呢");
            }
        },
        Scroll(e) {
            //滚动事件
            //console.log(e.target.clientHeight); //盒子的可视高度
            //console.log(e.target.scrollTop);    //据顶部的滚动距离
            //console.log(e.target.scrollHeight);     //一共可滚动的高度
            var cHeiht = e.target.clientHeight;
            var sTop = e.target.scrollTop;
            var sHeight = e.target.scrollHeight;

            console.log(sHeight - cHeiht - sTop);
            //一共可滚动的高度，其实就是盒子真实高度，它包括了那些不可见区域;此高度减去
            //盒子的可视高度等于被隐藏部分的高度，在减去滚动的距离scrollTop，当结果==0时，代表滚动到底部

            if (sHeight - cHeiht - sTop <= 0) {
                //滚动到底部判断状态
                if (this.num == 0) {
                    //变量为唯一变量，所以当重复加载定时器时，会把上一个定时器覆盖,这样就只有一个定时器再执行
                    this.timer = setTimeout(() => {
                        this.$axios.get("data2.json").then((res) => {
                            // this.list=this.list.concat(res.data.result.list)
                            //上下两种数组拼接方式等效
                            this.list = [...this.list, ...res.data.result.list];
                            //改变状态，不在加载此数据
                            this.num = 1;

                            clearTimeout(this.timer);
                            console.log(clearTimeout(this.timer));
                        });
                    }, 1200);
                } else if (this.num == 1) {
                    this.timer = setTimeout(() => {
                        this.$axios.get("data3.json").then((res) => {
                            this.list = [...this.list, ...res.data.result.list];
                            this.num = 2;
                            clearTimeout(this.timer);
                        });
                    }, 1200);
                } else if (this.num == 2) {
                    this.$message("商品加载完了");
                    return;
                } else {
                    return;
                }
            }
        },
        gotoShopCar() {
            this.$router.push("/shopcar");
        },
        changePrice(min, max) {
            this.list = this.allList.filter((item) => {
                if (item.salePrice > min && item.salePrice < max) {
                    return item;
                }
            });
        },
        sup() {
            this.list = this.list.sort((a, b) => {
                return a.salePrice - b.salePrice;
            });
        },
        sub() {
            this.list = this.list.sort((a, b) => {
                return b.salePrice - a.salePrice;
            });
        },
    },
    mounted() {
        this.$axios.get("data.json").then((res) => {
            console.log(res.data.result.list);
            this.list = res.data.result.list;

            this.$axios.get("data2.json").then((res) => {
                this.allList = [...this.list, ...res.data.result.list];
            });

            this.$axios.get("data3.json").then((res) => {
                this.allList = [...this.allList, ...res.data.result.list];
                console.log(this.allList); //全部数据
            });
        });
    },
};
</script>

<style lang="scss">
.load {
    width: 40%;
    height: 20vh;
    position: fixed;
    left: 35%;
    bottom: 5%;
    text-align: center;
    img {
        width: 100%;
        height: 100%;
    }
}
</style>